<template>
    <Panel>
        <IconTabs v-if="workRequests">
            <Tab :name="tabLabel('issue')" :selected="true" :icon="flagIcon" icon-class="flag-icon flag-icon--issue">
                <table>
                    <thead class="table-header--white">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>System ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="request in getRequestsByType('issue')">
                        <td>{{ request.id }}</td>
                        <td>{{ request.short_name }}</td>
                        <td><router-link :to="{ name: 'System', params: { id: request.systemId } }">{{ request.systemId }}</router-link></td>
                    </tr>
                    </tbody>
                </table>
            </Tab>
            <Tab :name="tabLabel('failure')" :icon="flagIcon" icon-class="flag-icon flag-icon--failure">
                <table>
                    <thead class="table-header--white">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>System ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="request in getRequestsByType('failure')">
                        <td>{{ request.id }}</td>
                        <td>{{ request.short_name }}</td>
                        <td><router-link :to="{ name: 'System', params: { id: request.systemId } }">{{ request.systemId }}</router-link></td>
                    </tr>
                    </tbody>
                </table>
            </Tab>
            <Tab :name="tabLabel('claim')" :icon="flagIcon" icon-class="flag-icon flag-icon--claim">
                <table>
                    <thead class="table-header--white">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>System ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="request in getRequestsByType('claim')">
                        <td>{{ request.id }}</td>
                        <td>{{ request.short_name }}</td>
                        <td><router-link :to="{ name: 'System', params: { id: request.systemId } }">{{ request.systemId }}</router-link></td>
                    </tr>
                    </tbody>
                </table>
            </Tab>
            <Tab :name="tabLabel('initiative')" :icon="flagIcon" icon-class="flag-icon flag-icon--initiative">
                <table>
                    <thead class="table-header--white">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>System ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="request in getRequestsByType('initiative')">
                        <td>{{ request.id }}</td>
                        <td>{{ request.short_name }}</td>
                        <td><router-link :to="{ name: 'System', params: { id: request.systemId } }">{{ request.systemId }}</router-link></td>
                    </tr>
                    </tbody>
                </table>
            </Tab>
            <Tab :name="tabLabel('maintenance')" :icon="flagIcon" icon-class="flag-icon flag-icon--maintenance">
                <table>
                    <thead class="table-header--white">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>System ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="request in getRequestsByType('maintenance')">
                        <td>{{ request.id }}</td>
                        <td>{{ request.short_name }}</td>
                        <td><router-link :to="{ name: 'System', params: { id: request.systemId } }">{{ request.systemId }}</router-link></td>
                    </tr>
                    </tbody>
                </table>
            </Tab>
        </IconTabs>

    </Panel>
</template>
<script>
    import axios from 'axios'
    import IconTabs from './IconTabs.vue'
    import KeyValue from './KeyValue.vue'
    import Panel from './Panel.vue'
    import Tab from './Tab.vue'

    export default {
        components: {
            IconTabs,
            Tab,
            KeyValue,
            Panel
        },

        props: [
            'workRequests'
        ],

        data() {
            return {
                flagIcon: require('../../assets/img/flag-icon.svg')
            }
        },

        methods: {
            getRequestsByType: function(type) {
                var requests = [];

                this.workRequests.forEach(request => {
                    if(request['type'] == type) {
                        requests.push(request);
                    }
                });

                return requests;
            },

            tabLabel: function(type) {
                var requests = [];
                this.workRequests.forEach(request => {
                    if(request['type'] == type) {
                        requests.push(request);
                    }
                });
                switch(type) {
                    case 'issue':
                        return 'Issues - ' + requests.length;
                        break;
                    case 'failure':
                        return 'Failures - ' + requests.length;
                        break;
                    case 'claim':
                        return 'Claims - ' + requests.length;
                        break;
                    case 'initiative':
                        return 'Initiatives - ' + requests.length;
                        break;
                    case 'maintenance':
                        return 'Maintenance - ' + requests.length;
                        break;
                }
            },
        }
    }
</script>